<template>
  <div><vue-particles
      color="#00ffff"
      :particleOpacity="1"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
      style="height:100%"
  >
  </vue-particles>
  <div style="margin-top: -650px">
      <div id="title">
        <img src="../assets/img/90-eryalixianghei-5e8.png"/>
      </div>
      <div>
        <p id="tag1">您在进行若兮博客注册之前,需要通过手机验证码验证身份,</p><br/>
        <p id="tag2">通过若兮安全校验后,会跳转至
          若兮注册页面,请根据页面提示完成注册!</p>
      </div>
    <div id="step">
    <el-steps align="center" :space="200" :active="active" finish-status="success" align-center>
      <el-step title="步骤 1" description="滑动验证码校验"></el-step>
      <el-step title="步骤 2" description="手机验证码校验"></el-step>
      <el-step title="步骤 3" description="校验成功"></el-step>
    </el-steps>
    </div>

    <div v-show="this.active === 2" id="hua">
        <slide-verify :l="42"
                      :r="10"
                      :w="310"
                      :h="155"
                      @success="onSuccess"
                      @fail="onFail"
                      @refresh="onRefresh"
                      :slider-text="text"
        ></slide-verify>
    </div>
    <div v-show="this.active === 1">
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" :rules="rules">
        <el-form-item prop="phoneNumber" label="手机号" size="max" id="input1">
          <el-input prefix-icon="el-icon-mobile-phone" v-model.number="formLabelAlign.phoneNumber" placeholder="请填写手机号"></el-input>
        </el-form-item>
        <el-form-item prop="code" id="input2" label="验证码" size="max">
          <el-input prefix-icon="el-icon-chat-square" v-model.number="formLabelAlign.code" placeholder="请填写验证码">
            <el-button id="sendButton" @click="sendCode()" slot="append" icon="el-icon-s-promotion">{{this.Ytxfont}}</el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div v-show="this.active === 1">
      <div id="protocol">
        <el-collapse>
          <el-collapse-item>
            <template slot="title">
              若兮用户协议&nbsp;&nbsp;<i class="el-icon-document"></i>
            </template>
            <div>一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不良信息。</div>
            <div>二、互相尊重，对自己的言论和行为负责。</div>
            <div>三、关于本站对来访者的管理,一旦违反用户协议,管理员将有权编辑删除拉黑用户信息。</div>
            <div>附：</div>
            <div>☞用户协议包括但不限于以上所述，后续将继续补充！</div>
            <div>☞本协议最终解释权归若兮博客本站所有！</div>
            <template>
              <el-radio v-model="radio" label="1">我已认真阅读并接受该协议</el-radio>
            </template>
          </el-collapse-item>
        </el-collapse>
      </div>
        <el-button-group style="margin-left: 640px;margin-top: 15px;margin-bottom: 50px">
          <el-button type="primary" @click="next()">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
    </div>
    <div v-show="this.active === 0">
      <div class="block" style="width: 500px;margin-left: 430px;margin-top: 20px">
        <el-carousel height="150px" indicator-position="outside" arrow="always">
          <el-carousel-item v-for="item in welcomeItems" :key="item">
            <center><h3 class="small">{{ item }}</h3></center>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="margin-left:660px;margin-top: 20px;margin-bottom: 50px">
        <ParticleEffect
            :hidden="effectHidden"
            direction="bottom"
            particle-type="rectangle"
            particle-style="fill"
            particle-color="#ff938b"
            :duration="1000"
            easing="easeInOutCubic"
            :canvas-padding="150"
            :size="4"
            :speed="2"
            :particles-amount-coefficient="3"
            :oscillation-coefficient="20"
            @begin="onBegin"
            @complete="onComplete"
        >
          <el-button type="danger" icon="el-icon-sunny" circle @click="searchQing()">探索</el-button>
        </ParticleEffect>
        </div>
    </div>
    <v-row justify="center">
      <v-dialog
          v-model="dialog"
          max-width="290"
      >
        <v-card>
          <v-card-title class="headline">
            若兮博客将获取您的手机号?
          </v-card-title>

          <v-card-text>
            根据若兮用户协议规定,若兮博客有权获取您的注册信息,这意味着您在若兮博客的行为将接受若兮管理员的监督,若兮开发团队承诺: 将严格保密您的用户信息。
          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>

            <v-btn
                color="green darken-1"
                text
                @click="disagree"
            >
              不同意
            </v-btn>

            <v-btn
                color="green darken-1"
                text
                @click="agree"
            >
              同意
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
  </div>
</template>

<script>
	import ParticleEffect from '../components/button/particle-effect'
export default {
  name: "SecurityCheck",
	components: {ParticleEffect},
  data () {
	  var checkAge = (rule, value, callback) => {
		  if (!value) {
			  return callback(new Error('手机号不能为空'));
		  }
		  setTimeout(() => {
			  if (!Number.isInteger(value)) {
				  callback(new Error('请输入纯数字'));
			  } else {
				  if (!/^1(3|4|5|6|7|8)\d{9}$/.test(value)) {
					  callback(new Error('手机号为11位纯数字'));
				  } else {
					  callback();
				  }
			  }
		  }, 1000);
	  }
	  var checkCode = (rule, value, callback) => {
		  if (!value) {
			  return callback(new Error('验证码不能为空'));
		  }
		  setTimeout(() => {
			  if (!Number.isInteger(value)) {
				  callback(new Error('请输入纯数字'));
			  } else {
				  if (!/^\d{6}$/.test(value)) {
					  callback(new Error('验证码为6位纯数字'));
				  } else {
					  callback();
				  }
			  }
		  }, 1000);
	  }
    return {
      baseURL: 'http://localhost/user/user/',
      text: '向右滑动以解锁',
			dialog: false,
			effectHidden: false,
      radio: '1',
      active: 0,
      stepTitle: '',
      Ytxfont: '发送验证码',
      Countdown: true,
      Counts: 0,
      sendCodeStatus: 'error',
      labelPosition: 'right',
      checkPhoneNumber: '',
      welcomeItems: {
            a: '欢迎注册若兮博客!',
            b: '用户老爷您来啦!',
            c: '抓紧抓紧注册注册!!',
            d: '开始探索若兮世界!'
      },
      formLabelAlign: {
        phoneNumber: '17320525380',
        code: ''
      },
      rules: {
	    phoneNumber: [
            { validator: checkAge, trigger: 'blur' }
        ],
        code: [
            { validator: checkCode, trigger: 'blur' }
        ]
        }
    }
  },
  mounted(){
  	this.initialization()
  },
  methods: {
		initialization() {
				this.$notify({
					title: '提示',
					message: '如若验证码未加载出来,请刷新页面重试!',
					type: 'warning',
					offset: 200
				});
    },
    searchQing () {
			this.effectHidden = true
    },
		onBegin () {
		},
		onComplete () {
			this.effectHidden = false
      localStorage.setItem('phoneNumber',this.formLabelAlign.phoneNumber)
      this.$router.push({ name: 'home', params: { isRegister: true }})
		},
    next () {
    var vm = this
      if (vm.sendCodeStatus === 'ok') {
      	if (!/^\d{6}$/.test(vm.formLabelAlign.code)) {
		      vm.$message({
			      message: "请输入6位纯数字的验证码!",
			      type: 'error',
			      center: true
		      });
        } else {
		      this.axios({
			      method: 'GET',
			      url: vm.baseURL + 'checkRegisterCode',
			      params: {'code': vm.formLabelAlign.code , 'phoneNumber' : vm.checkPhoneNumber}
		      }).then(function (resp) {
			      if (resp.data.status === 'ok') {
				      vm.$message({
					      message: resp.data.message,
					      type: 'success',
					      center: true
				      });
				      vm.active++
			      } else {
				      vm.$message({
					      message: resp.data.message,
					      type: 'error',
					      center: true
				      });
			      }
		      })
	      }
      } else {
	      vm.$message({
		      message: '请先发送验证码!',
		      center: true
	      });
      }
    },
    onSuccess () {
        this.active++
        this.$message({
            showClose: true,
            message: '滑动解锁成功!',
            center: true,
            type: 'success'
        });
    },
    onFail () {
        this.$message({
            showClose: true,
            message: '滑动解锁失败!',
            center: true,
            type: 'error'
        });
    },
    onRefresh () {
    },
    sendCode () {
      var vm = this
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(vm.formLabelAlign.phoneNumber)) {
	      vm.$message({
		      message: '请填写正确的手机号码!',
		      type: 'warning',
		      center: true
	      });
      } else {
      	vm.dialog = true
      }
	  },
    disagree () {
			this.dialog = false
    },
	  agree () {
			var vm = this
			vm.dialog = false
			if (vm.Counts === 0) {
				this.axios({
					method: 'GET',
					url: vm.baseURL + 'sendPhoneCode',
					params: {'phoneNumber': vm.formLabelAlign.phoneNumber}
				}).then(function (resp) {
					if (resp.data.status === 'ok') {
						vm.checkPhoneNumber = resp.data.phoneNumber
						vm.$message({
							message: resp.data.message,
							type: 'success',
							center: true
						});
						vm.sendCodeStatus = 'ok'
						if (vm.Countdown) {
							vm.Countdown = false
							vm.Counts = 60
							document.getElementById('sendButton').style.cursor = 'not-allowed'
							let a = setInterval(function () {
								if (vm.Counts === 0) {
									vm.Countdown = true
									vm.Ytxfont = '发送验证码'
									document.getElementById('sendButton').style.cursor = 'pointer'
									vm.sendCodeStatus = 'error'
									clearInterval(a)
								} else {
									vm.Counts--
									vm.Ytxfont = `${vm.Counts}秒`
								}
							}, 1000)
						} else {
							vm.$message({
								message: '验证码发送频繁!',
								type: 'warning',
								center: true
							});
						}
					} else {
						vm.$message({
							message: resp.data.message,
							type: 'error',
							center: true
						});
					}
				})
			} else {
				vm.$message({
					message: '验证码发送频繁!',
					type: 'warning',
					center: true
				});
			}
    }
  }
}
</script>

<style scoped>
#step{
  margin-left: 380px;
  margin-top: 50px;
}

#title{
  margin-top: 50px;
  margin-left:530px;
}

#tag1{
  margin-top: -20px;
  margin-left: 480px;
  font-size: 14px;
  color: #E6A23C;
}

#tag2{
  margin-left: 470px;
  font-size: 14px;
  margin-top: -30px;
  color: #E6A23C;
}

#input1{
  width: 400px;
  margin-left: 450px;
  margin-top: 50px;
}

#input2{
  width: 400px;
  margin-left: 450px;
  margin-top: 10px;
}
#hua{
  margin-top: 40px;
  margin-bottom: 50px;
  margin-left: 530px;
}
#protocol{
  width: 320px;
  margin-left: 530px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
